<template>
  <div class="PopularMV">
    <div class="title" @click="JumpToHomePage">
      <span class="iconfont icon-xiangzuo"></span>热门MV
    </div>
    <div>
      <van-tabs v-model="activeName">
        <!-- <van-tab title="全部" name="a">
          <div
            class="vanGrid"
            v-for="(item, index) in Whole"
            :key="index"
            @click="VideoID(item.id)"
          >
            <div :style="'background-image: url(' + item.cover + ')'"></div>
            <p>{{ item.artistName }}&nbsp;--&nbsp;《{{ item.name }}》</p>
          </div>
        </van-tab> -->
        <van-tab title="内地" name="a">
          <div
            class="vanGrid"
            v-for="(item, index) in Inland"
            :key="index"
            @click="VideoID(item.id)"
          >
            <div :style="'background-image: url(' + item.cover + ')'"></div>
            <p>{{ item.artistName }}&nbsp;--&nbsp;《{{ item.name }}》</p>
          </div>
        </van-tab>
        <van-tab title="港台" name="b">
          <div
            class="vanGrid"
            v-for="(item, index) in HongKong"
            :key="index"
            @click="VideoID(item.id)"
          >
            <div :style="'background-image: url(' + item.cover + ')'"></div>
            <p>{{ item.artistName }}&nbsp;--&nbsp;《{{ item.name }}》</p>
          </div>
        </van-tab>
        <van-tab title="欧美" name="c">
          <div
            class="vanGrid"
            v-for="(item, index) in Europe"
            :key="index"
            @click="VideoID(item.id)"
          >
            <div :style="'background-image: url(' + item.cover + ')'"></div>
            <p>{{ item.artistName }}&nbsp;--&nbsp;《{{ item.name }}》</p>
          </div>
        </van-tab>
        <van-tab title="日本" name="d">
          <div
            class="vanGrid"
            v-for="(item, index) in Japan"
            :key="index"
            @click="VideoID(item.id)"
          >
            <div :style="'background-image: url(' + item.cover + ')'"></div>
            <p>{{ item.artistName }}&nbsp;--&nbsp;《{{ item.name }}》</p>
          </div>
        </van-tab>
        <van-tab title="韩国" name="e">
          <div
            class="vanGrid"
            v-for="(item, index) in Korea"
            :key="index"
            @click="VideoID(item.id)"
          >
            <div :style="'background-image: url(' + item.cover + ')'"></div>
            <p>{{ item.artistName }}&nbsp;--&nbsp;《{{ item.name }}》</p>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import { getMvAll } from "../../api/ranking";
export default {
  data() {
    return {
      AllIabels: ["全部", "内地", "港台", "欧美", "日本", "韩国"],
      Whole: null,
      Inland: null,
      HongKong: null,
      Europe: null,
      Japan: null,
      Korea: null,
      activeName: "a",
    };
  },
  methods: {
    VideoID(id) {
      this.$router.push({ name: "PlayMV", query: { id: id } });
    },
    JumpToHomePage() {
      this.$router.push("/recommend");
    },
    getMvAllWhole() {
      getMvAll({ area: "全部" }).then((data) => {
        this.Whole = data.data;
        console.log(data);
      });
    },
    getMvAllInland() {
      getMvAll({ area: "内地" }).then((data) => {
        this.Inland = data.data;
      });
    },
    getMvAllHongKong() {
      getMvAll({ area: "港台" }).then((data) => {
        this.HongKong = data.data;
        console.log(data);
      });
    },
    getMvAllEurope() {
      getMvAll({ area: "欧美" }).then((data) => {
        this.Europe = data.data;
        console.log(data);
      });
    },
    getMvAllJapan() {
      getMvAll({ area: "日本" }).then((data) => {
        this.Japan = data.data;
        console.log(data);
      });
    },
    getMvAllKorea() {
      getMvAll({ area: "韩国" }).then((data) => {
        this.Korea = data.data;
        console.log(data);
      });
    },
  },
  created() {
    this.getMvAllWhole();
    this.getMvAllInland();
    this.getMvAllHongKong();
    this.getMvAllEurope();
    this.getMvAllJapan();
    this.getMvAllKorea();
  },
};
</script>
<style lang="less">
.PopularMV {
  .title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: white;
    font-weight: 500;
    background-color: #d44439;
    span {
      font-size: 20px;
      margin: 0 2%;
    }
  }
  .van-tab__pane {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .vanGrid {
      width: 45%;
      height: 20vh;
      margin: 3% auto;
      div {
        width: 100%;
        margin: 0 auto;
        height: 70%;
        border-radius: 10px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      p {
        width: 90%;
        margin: 10px auto;
        overflow:hidden;
        white-space:nowrap; 
        text-overflow:ellipsis;
      }
    }
  }
}
</style>